<template>
<view>
  <u-popup
      v-model="show"
      width="620rpx"
      :mask-close-able="false"
      :border-radius="34"
      mode="center">
      <div class="version-poper">
        <div style="text-align: center; font-size: 36rpx; font-weight: bold; padding-top: 24rpx;">发现新版本</div>
        <div class="content">
          <div class="t">版本：v{{newVersion.version}}</div>
          <div class="body">
            {{ newVersion.description }}
          </div>
          <div class="flex" style="display: flex;">
            <u-button @click="jumpThis" style="width: 220rpx ; margin-right: 12rpx;">下次提醒我</u-button>
            <u-button class="s-btn" @click="startUpload" shape="square" type="primary" :disabled="!!progress" style="flex: 1">
              <div v-if="progress === null">立即更新</div>
              <div v-else-if="progress === 100">正在安装</div>
              <div v-else>下载中...{{ progress }}%</div>
            </u-button>
          </div>
        </div>
      </div>
    </u-popup>
</view>
</template>

<script>
	export default {
		data() {
			return {
        progress: null,
				newVersion:{},
				show: false
			}
		},
	
		onLoad(option) {
			this.newVersion=JSON.parse(option.newVersion);
      setTimeout(() => {
        console.log(this.newVersion)
        this.show = true
      }, 150)
		},
		
		methods: {

      jumpThis () {
        uni.setStorageSync('version-jump', this.newVersion.version)
        uni.navigateBack()
      },
      async startUpload () {
        console.log(this.newVersion, 111)
        if (this.newVersion.type === 'FULL' && this.newVersion.os === 'IOS') {
          // 直接跳浏览器
          plus.runtime.launchApplication({
            action: this.newVersion.app_url
          }, function(e) {
            console.log('Open system default browser failed: ' + e.message);
          })
          return
        }
        const isWgt = /\.wgt$/.test(this.newVersion.app_url)
        const isApk = /\.apk$/.test(this.newVersion.app_url)
        const localFile = await new Promise(resolve => {
          const dtask = plus.downloader.createDownload(this.newVersion.app_url, {}, (d, status) => {
            if (status === 200) {
              resolve(d.filename)
            } else {
              this.$u.toast('下载失败')
            }
          })
          dtask.start()

          dtask.addEventListener('statechanged', (task) => {
            const p = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) *100)
            if (isNaN(p)) return
            this.progress = p
          })
        })

        this.progress = null
        this.loading = true
        if (isWgt) {
          plus.runtime.install(localFile, {force: true}, async () => {
            this.$u.toast('安装成功！', 1000)
            this.loading = false
            setTimeout(() => {
              plus.runtime.restart()
            }, 1200)
          }, (e) => {
            loading.value = false
            this.$u.toast('安装失败', 1000)
          })
          this.show = false
          return
        }
        if (isApk) {
          plus.runtime.openFile(localFile)
          this.$u.toast('安装成功！', 1000)
          this.loading = false
          this.show = false
        }
      },
		}
	}
</script>

<style lang="scss">
  page,body{ background-color: transparent !important; width: 100%; height: 100%;}
  .version-poper{
    overflow: hidden; background-color: #fff; align-items: center;
    .banner{  height: 252rpx;}
    .t{ margin: 10rpx 0 20rpx; font-size: 30rpx; line-height: 42rpx;}
    .content{ padding: 24rpx;}
    .body{ width: 100%; margin-bottom: 40rpx; padding: 0 24rpx; white-space: pre-line;}
    .s-btn{ overflow: hidden;}
    .progress{ background-color: darken($color: #00FFBF, $amount: 10%); position: absolute; top:0; left:0; bottom: 0;}
  }
</style>
